<template>
	<view class="page video-manage-page">
		123
		<!-- <view class="container"> -->	
			<!-- <u-button @click="getLocalFileVideo">获取本地文件</u-button> -->
			<!-- <view class="upload-box" flex="corss:center main:center"> -->
				<!-- <view v-for="(video, index) in formData.videoList" :key="index"> -->
					<!-- <view class="block video-block" @click.stop="showAction(index)"> -->
						<!-- {{ video.tempFiles[0].name }} -->
						<!-- <image :disabled="false" :controls="false" :autoplay="false" :src="video.url + '?x-oss-process=video/snapshot,t_0,f_jpg'"></image> -->
						<!-- <video :src="video.url"></video> -->
					<!-- </view> -->
					<!-- <view class="item-action" :style="{ display: actionIndex == index ? 'block' : 'none' }"><u-button @click="showVideo(video)">查看</u-button></view> -->
				<!-- </view> -->
<!-- 				<uni-file-picker limit="3" v-model="imageValue" fileMediatype="video" mode="grid" :list-styles="listStyles" @select="select">
					<view class="add block"><u-icon name="plus" color="#8c939d" size="56"></u-icon></view>
				</uni-file-picker> -->
			<!-- </view> -->
			<!-- <view class="form-box">
				<scroll-view scroll-y="true" class="scroll-Y" style="height:100%">
					<view class="form-list" flex>
						<view class="form-item" v-for="(video, index) in formData.videoList">
							<u-form :model="video.form" ref="uForm" class="apply-form-field" label-width="150">
								<u-form-item label="拍摄地点" prop="address"><u-input v-model="video.form.address" /></u-form-item>
								<u-form-item label="视频分类" prop="category" right-icon="arrow-right">
									<u-input v-model="video.form.category" placeholder="请选择" disabled @click="onShowTypePopup('category', index)" />
								</u-form-item>
								<u-form-item label="拍摄时间" prop="creatTime" right-icon="arrow-right">
									<view style="text-align: right;width: 100%;" @click.stop="onShowTime(index)">{{ formatTime(video.form.creatTime) }}</view>
								</u-form-item>
								<u-form-item label="拍摄方向" prop="direction" right-icon="arrow-right">
									<u-input v-model="video.form.direction" placeholder="请选择" disabled @click="onShowTypePopup('direction', index)" />
								</u-form-item>
								<u-form-item label="拍摄人" prop="person"><u-input v-model="video.form.person" /></u-form-item>
								<u-form-item label="证据来源" prop="resource" right-icon="arrow-right">
									<u-input v-model="video.form.resource" placeholder="请选择" disabled @click="onShowTypePopup('resource', index)" />
								</u-form-item>
								<u-form-item label="拍摄设备" prop="device"><u-input v-model="video.form.device" placeholder="请输入" class="form-field-select" /></u-form-item>
								<u-form-item label="标签" prop="tag" right-icon="arrow-right">
									<u-input v-model="video.form.tag" placeholder="请选择" disabled @click="onShowTypePopup('tag', index)" />
								</u-form-item>
							</u-form>
						</view>
					</view>
				</scroll-view>
			</view> -->
			<!-- <view class="video-list" flex>
				<view class="video-item" v-for="(item,index) in formData.videoList" :key="index">
					<view class="title">{{item.tempFiles[0].name}}</view>
					<video :src="item.url"></video>
				</view>
			</view> -->
<!-- 		</view>
		<view class="footer">
			<view class="btns" flex>
				<u-button class="btn" :hair-line="false" @click="cancel">取消</u-button>
				<u-button class="btn" type="primary" :hair-line="false" @click="confirm">确定</u-button>
			</view>
		</view>
		<u-picker mode="time" :defaultTime="timeObj.defaultStartTime" v-model="timeObj.show" :params="timeObj.params" @confirm="confirmTimePicker"></u-picker>
		<u-select v-model="popupSelect.show" mode="single-column" :list="popupSelect.list" value-name="dictValue" label-name="dictLabel" @confirm="confirmSelect"></u-select> -->
	</view>
</template>

<script>
import { dicDataMap } from '@/const';
	// import {
	// 	videoThumbnail
	// } from '@/static/common/js/videoThumbnail'
export default {
	data() {
		return {
			videoList: [],
			imageValue: [],
			listStyles: {
				borderStyle: {
					color: 'red', // 边框颜色
					width: '1px', // 边框宽度		3wa
					style: 'solid', // 边框样式
					radius: '5px' // 边框圆角，不支持百分比
				},
				border: true, // 是否显示边框
				dividline: true // 是否显示分隔线
			},
			params: {},
			currentRow: {},
			formData: {},
			form: {
				address: '',
				category: '',
				creatTime: new Date().getTime(),
				direction: '',
				person: '',
				resource: '',
				device: '华为平板',
				tag: ''
			},
			directionDict: dicDataMap,
			categoryDict: [],
			resourceDict: [],
			tagDict: [],
			popupSelect: {
				type: '',
				show: false,
				list: [],
				index: null
			},
			timeObj: {
				show: false,
				defaultTime: new Date(),
				index: null,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					timestamp: true
				}
			},
			actionIndex: null
		};
	},
	async onLoad(params) {
		this.params = params;
		const { dictId, noticeId, currentIndex } = params;
		// uni.getStorage({
		// 	key: 'videoList',
		// 	complete: (res) => {
		// 		if (res.data.list && res.data.list.length) {
		// 			this.videoList = res.data.list
		// 		}
		// 	}
		// });
		console.log(1);
		// const data = await this.getDetailByNoticeId(dictId, noticeId);
		// this.currentRow = data;
		// if (currentIndex || currentIndex == 0) {
		// 	this.formData = data.jsonStr && JSON.parse(data.jsonStr)[currentIndex];
		// } else {
		// 	this.initForm();
		// 	console.log(this.formData);
		// }
		// let p = this.getDictData('video_category')
		// let p = this.getDictData('resource_type')
		// let p = this.getDictData('tag_type')
		// let pArr = [this.getDictData('video_category'), this.getDictData('resource_type'), this.getDictData('tag_type')];
		// Promise.all(pArr).then(res => {
		// 	this.categoryDict = res[0].data;
		// 	this.resourceDict = res[1].data;
		// 	this.tagDict = res[2].data;
		// });
	},
	computed: {
		formatTime() {
			return time => {
				return this.$u.timeFormat(time, 'yyyy年mm月dd日');
			};
		},
		formatAddress() {
			return address => {
				if (!address || !address.length) return '--';
				return address.split(',')[2];
			};
		},
		videoUrl() {
			return url => {
				return url + '?date=' + new Date().getTime();
			};
		}
	},
	onShow() {},
	methods: {
		showAction(index) {
			console.log(index);
			this.actionIndex = index;
		},
		async getDetailByNoticeId(dictId, noticeId) {
			return await this.$u.api.record.info(dictId, noticeId).then(res => {
				if (res.code == 200) {
					return res.data;
				}
			});
		},
		// 获取上传状态
		select(e) {
			console.log('选择文件：', e);
			this.form.address = this.formatAddress(this.vuex_archives.fireAddress);
			this.form.person = this.formData.userName;
			let formDeep = this.$u.deepClone(this.form);
			// console.log(formDeep);
			let filePath =  e.tempFilePaths[0].slice(6)
			console.log(filePath);
			// videoThumbnail(filePath,'cls001')
			this.formData.videoList.push({
				tempFiles: e.tempFiles,
				url: e.tempFilePaths[0],
				form: formDeep
			});
		},
		confirm() {
			const { currentIndex, dictId } = this.params;
			let { jsonStr } = this.currentRow;
			jsonStr = jsonStr && jsonStr != '' ? JSON.parse(jsonStr) : [];
			this.formData.createTime = new Date().getTime();
			if (currentIndex) {
				this.currentRow.handleType = 2;
				jsonStr.splice(currentIndex, 1, this.formData);
			} else {
				this.currentRow.handleType = 1;
				jsonStr.push(this.formData);
			}
			this.currentRow.jsonStr = JSON.stringify(jsonStr);
			this.$u.api.record.edit(dictId, this.currentRow).then(res => {
				console.log(res);
				if (res.code == 200) {
					let self = this;
					uni.showToast({
						title: res.msg,
						duration: 1300,
						icon: 'success',
						success() {
							setTimeout(() => {
								self.initForm();
								uni.navigateBack({
									delta: 1
								});
							}, 1000);
						}
					});
				}
			});
		},
		cancel() {
			this.initForm();
			uni.navigateBack({
				delta: 1
			});
		},
		initForm() {
			this.formData = {
				videoList: [],
				userName: this.vuex_user.nickName,
				createTime: '',
				title: `${this.vuex_user.nickName}-${this.$u.timeFormat(new Date(), 'yyyy年mm月dd日')}`
			};
		},
		getDictData(type) {
			return this.$u.api.dictData({ isDic: true, dictType: type });
		},
		onShowTypePopup(type, index) {
			this.popupSelect.type = type;
			this.popupSelect.show = true;
			this.popupSelect.list = this[type + 'Dict'];
			this.popupSelect.index = index;
			console.log(type);
			// categoryDict: [],
			// resourceDict: [],
			// tagDict: [],
		},
		confirmSelect(e) {
			console.log(this.popupSelect);
			console.log(e);
			const { type, list, index } = this.popupSelect;
			this.formData.videoList[index].form[type] = e[0].label;
		},
		onShowTime(index) {
			console.log('123');
			// creatTime
			this.timeObj.show = true;
			this.timeObj.index = index;
		},
		confirmTimePicker(e) {
			console.log(e);
			const { index } = this.timeObj;
			let timeFormat = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd hh:MM:ss');
			this.formData.videoList[index].form['creatTime'] = timeFormat;
		},
		showVideo(video) {}
	}
};
</script>

<style lang="scss" scoped>
.video-manage-page {
	height: calc(100vh);
	/* #ifdef H5 */
	height: calc(100vh - 44px);
	/* #endif */
	position: relative;
	background-color: #fff;
	.container {
		padding: 30upx;
		padding-bottom: 132upx;
		overflow-y: auto;
	}
}

.video-list {
	padding: 30upx;
	flex-wrap: wrap;
	.video-item {
		padding: 10upx 20upx;
		.title {
			font-size: 36upx;
			margin-bottom: 10upx;
		}
	}
}

.upload-box {
	flex-wrap: wrap;
	.block {
		// width: 296upx;
		// height: 296upx;
		width: 380upx;
		height: 380upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fbfdff;
		border: 1px dashed #c0ccda;
		border-radius: 6px;
		word-break: break-all;
		text-align: center;
		video {
			width: 100%;
			height: 100%;
		}
	}

	.video-block {
		margin: 0 16upx 16upx 0;
	}
	.item-action {
		display: none;
	}
}
::v-deep .form-box {
	position: fixed;
	width: 100%;
	top: 420upx;
	height: calc(100vh - 420upx - 132upx);
	.form-list {
		flex-wrap: wrap;

		.form-item {
			width: 32%;
			margin-right: 20upx;
			margin-bottom: 20upx;
			// border: 2upx solid #dcdfe6;
			// u-form-item u-border-bottom
			.u-form-item--right {
				border-radius: 8upx;
				border: 2upx solid #dcdfe6;
				padding-right: 20upx;
			}
			.u-form-item {
				&::after {
					display: none;
				}
			}
		}
	}
}

::v-deep .uni-file-picker__lists {
	display: none;
}

.footer {
	width: 100%;
	position: absolute;
	bottom: 0;

	.btns {
		width: 100%;
	}

	.btn {
		flex: 1;
		height: 132upx;
	}

	.btn + .btn {
		margin-left: 20upx;
	}
}
</style>
